import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default function CustomTabBar() {
  const [selected, setSelected] = useState(0)

  const tabList = [
    { pagePath: '/pages/home/index', text: '首页', icon: '🏠' },
    { pagePath: '/pages/mine/index', text: '我的', icon: '👤' },
  ]

  const switchTab = (index: number) => {
    setSelected(index)
    Taro.switchTab({ url: tabList[index].pagePath })
  }

  return (
    <View className="custom-tab-bar">
      {tabList.map((item, index) => (
        <View
          key={item.pagePath}
          className={`tab-item ${selected === index ? 'active' : ''}`}
          onClick={() => switchTab(index)}
        >
          <Text className="icon">{item.icon}</Text>
          <Text className="text">{item.text}</Text>
        </View>
      ))}
    </View>
  )
}
